@import "color";
@import "reset";
@import "common";
@import "gray";
@import "animate";

*, *:before, *:after {
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
}
.hide {
	display: none;
}
.border-bottom {
	background: url(image/gray-dot.png) repeat-x bottom;
}

.border-right {
	background: url(image/gray-dot.png) repeat-y right;
}

.border-left {
	background: url(image/gray-dot.png) repeat-y left;
}

.kfSec {
	.stateIco {
		width: 16px;
		height: 16px;
		vertical-align: middle;
		display: inline-block;
		*zoom: 0;
		background: url(image/state_sprite.png) no-repeat scroll 0 0 transparent;
	}

	.online {
		.stateIco {
			background-position: 0 0;
		}
	}
	.offline {
		.stateIco {
			background-position: -90px 0;
		}
	}
	.handover {
		.stateIco {
			background-position: -108px 0;
		}
	}

	.kfLeft {
		width: 200px;
		float: left;
		background-color: @ecshop-bg;
	}
	.callerList {
		list-style: none;

		.cli {
			line-height: 2em;
			padding: 8px 10px;
			&.active {
				background-color: @ecshop-bg-hover;
				&:hover {
					background-color: @ecshop-bg-hover;
				}
			}
			&:hover {
				background-color: @gray-light;
			}
		}

		.callerLabel {
			cursor: pointer;

			.title {
				margin-left: .5em;
			}
		}

		.msgNum {
			display: inline-block;
			height: 16px;
			line-height: 16px;
			padding-left: 5px;
			padding-right: 5px;
			margin-left: .5em;
			border-radius: 8px;
			background-color: @msg-num-bg;
			color: #fff;
			font-family: Consolas, Menlo, Monaco, monospace;
			vertical-align: middle;
			*zoom: 1;

			&.hide {
				display: none;
			}
		}
	}
	.kfMain {
		float: left;
		background-color: #fff;
	}
	.sysMsgBox {
		height: 40px;
		.border-bottom;
		.clearfix();
	}
	.sysMsgList {
		float: left;
		list-style: none;
		width: 200px;
		height: 32px;
		line-height: 32px;
		padding: 3px 8px;
	}

	.dialogBox {
		.dpMain {
			position: relative;
			top: 0;
			left: 0;
			width: 75%;
			float: left;
			overflow: hidden;
			//border-right: 1px solid @split-line-color;
		}
		.dpSide {
			width: 260px;
			float: right;
			.border-left;
		}

		.kfInputBox {
			position: absolute;
			bottom: 0px;
			left: 0;
			width: 100%;
			height: 195px;

			.ibhandle {
				height: 5px;
				background: url(image/split-line.png) repeat-x scroll 0 0 transparent;
			}

			.ibTopBar {
				height: 30px;
				.border-bottom;
			}

			.ibBotBar {
				height: 40px;
				.clearfix();
			}

			.msgInput {
				height: 110px;
				width: 100%;
				padding: 5px 8px;
				line-height: 1.4em;
				border: 0 none;
				resize: none;
				outline: none;
				font-size: 16px;
				color: #000;
			}
		}
	}

	.dialogPanel {
		position: relative;
		z-index: 1;
		top: 0;
		left: 0;
		.clearfix();
		.dpHead {
			height: 40px;
			background: @gray-light url(image/gray-dot.png) repeat-x bottom;

			.title {
				float: left;
				margin: 0;
				padding: 0 10px;
				line-height: 40px;
			}

			.toolBar {
				float: right;
				width: 200px;
				height: 32px;
				line-height: 32px;
				padding: 3px 8px;
				text-align: right;
				.clearfix();

				.tBtn {
					padding: 6px 12px;
					margin-left: 10px;
					font-size: 14px;
					border-radius: 3px;
					background-color: @gray-light;
					border: 1px solid darken(@gray-light, 3%);
					cursor: pointer;
					&:hover {
						background-color: darken(@gray-light, 5%);
						border: 1px solid darken(@gray-light, 8%);
					}

					&.tBtnBlue {
						background-color: @blue;
						border: 1px solid darken(@blue, 3%);
						color: #fff;
						&:hover {
							background-color: darken(@blue, 5%);
							border: 1px solid darken(@blue, 8%);
						}
					}

					&.tBtnRed {
						background-color: @red;
						border: 1px solid darken(@red, 3%);
						color: #fff;
						&:hover {
							background-color: darken(@red, 5%);
							border: 1px solid darken(@red, 8%);
						}
					}
				}
			}
		}
		.dpBody {
			.clearfix();
		}
	}

	.kfBlock {
		.clearfix();
	}

	.msgList {
		list-style: none;
		line-height: 1.6em;
		overflow-y: auto;
		overflow-x: hidden;
		.systemMessage {
			padding: 20px 10px;
		}
	}

	.msgLi {
		padding: 5px 10px;

		&.preMsg {
			.mLabel {
				border: 1px dashed @inputing-border-color;
			}
			.mTit, .mContent {
				color: @inputing-color;
			}
		}
		.mHead {
			margin-bottom: 5px;
			font-size: 14px;
			color: @font-black;
			line-height: 1.6em;
			vertical-align: text-bottom;
			.clearfix();
		}
		.mTit {
			float: left;
			font-size: 14px;
			font-weight: 700;
		}
		.mTime {
			float: left;
			margin-left: 1em;
			margin-right: 1em;
			font-size: 75%;
			color: @gray-darker;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
		.mContent {
			clear: both;
			line-height: 1.4em;
			word-wrap: break-word;
			white-space: pre-wrap
		}

		.mLabel {
			position: relative;
			top: 0;
			left: 0;
			z-index: 1;
			padding: 5px 10px;
			border: 1px solid #fff;
			border-radius: 5px;
			background-color: @cloud;

			.triangle {
				position: absolute;
				top: 5px;
				left: -8px;
				width: 0;
				height: 0;
				border-top: 8px solid transparent;
				border-right: 8px solid @cloud;
				border-bottom: 8px solid transparent;
				border-left: 0 none;
			}
		}

		&.msgRt {
			.mTit {
				float: right;
			}
			.mTime {
				float: right;
			}
			.mContent {
				text-align: right;
			}

			.mLabel {
				background-color: @white-blue-bg;
				.triangle {
					left: auto;
					right: -8px;
					border-right: 0 none;
					border-left: 8px solid @white-blue-bg;
				}
			}
		}
	}

	.timebox {
		text-align: center;
		.tmstr {
			display: inline-block;
			padding: 0 .5em;
			font-size: 12px;
			color: @gray-light;
		}
	}


	.spline {
		.timebox {
			background: url(image/msg-spliter.png) no-repeat center transparent;
		}
	}

	.kBtn {
		float: right;
		min-width: 120px;
		padding: 6px 12px;
		margin-top: 5px;
		margin-right: 10px;
		border: 1px solid @btn-border;
		border-radius: 5px;
		background-color: @btn-bg;
		color: #fff;
		cursor: pointer;
		outline: none;
		&:hover {
			background-color: @btn-bg-hover;
		}
	}

	.kBtnLink {
		float: right;
		padding: 6px 12px;
		margin-top: 6px;
		margin-right: 10px;
		color: @gray-dark;
		text-decoration: none;
		&:hover {
			color: @btn-link-hover;
			text-decoration: underline;
		}
	}

	.callerInfoBox {
		padding-left: 3px;
		.ciBox {

		}
	}

	.qkInputBox {
		padding-left: 3px;
	}
}

.passToDialog {
	.ui-dialog-body {
		padding: 20px 10px;
	}
}

.passToUl {
	padding: 0;
	margin: 0;
	list-style: none;
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
	*height: 200px;
	li {
		line-height: 1.8em;
	}
}

.passTomMsgBox {
	margin-top: 10px;
}

.passToMsg {
	width: 458px;
	height: 3em;
	padding: 10px;
	margin-top: 6px;
	resize: none;
}

.ballonToolTip {
	.ui-dialog-body {
		padding: 10px 20px;
	}
	&.text-blue {
		color: @blue-text;
	}
}

.callerInfoTable {
	width: 255px;
	padding: 0;
	margin: 0;
	//overflow: hidden;
	.attrName, .attrVal {
		padding: 8px;
		margin: 0;
		line-height: 1.42857143;
		vertical-align: top;
		border-bottom: 1px solid #ddd;
	}
	.attrName {
		width: 80px;
	}
	.attrVal {
		width: 143px;
	}
}

.kfBackground {
	display: none;
	height: 0;
	width: 0;
	font-size: 0;
}